<template>
    <div>
        <el-page-header content="编辑新闻" title="新闻管理" @back="handleBack()"></el-page-header>

        <el-form ref="newsFormRef" :model="newsForm" :rules="newsFormRules" label-width="80px" class="demo-ruleForm"
            status-icon>
            <el-form-item label="标题" prop="title">
                <el-input v-model="newsForm.title" placeholder="请输入标题" />
            </el-form-item>
            <el-form-item label="新闻内容" prop="content">
                <editor @event="handleChangeEditor" :content="newsForm.content" v-if="showEditor"></editor>
            </el-form-item>
            <el-form-item label="新闻类别" prop="category">
                <el-select v-model="newsForm.category" placeholder="请选择新闻类别" style="width: 100%;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="新闻封面" prop="cover">
                <Upload :avatar="newsForm.cover" @uploadChange="handleChange"></Upload>
            </el-form-item>
            <el-form-item prop="publish" label="是否发布">
                <el-switch v-model="newsForm.publish" :active-value="1" :inactive-value="0">
                </el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">更新新闻</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, defineProps } from 'vue'
import editor from '@/components/editor/Editor'
import Upload from '@/components/upload/Upload'
import upload from '@/util/upload';
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
const route = useRoute()
const router = useRouter()
const newsFormRef = ref()
let newsForm = reactive({
    title: "",
    content: "",
    category: 1,// 最新动态，典型案例，通知公告
    cover: "",
    file: null,
    publish: 0
})
// 定义一个是否展示编辑区
const showEditor = ref(false)
// 定义规则校验
const newsFormRules = reactive({
    title: [
        { required: true, message: '请输入标题', trigger: 'blur' },
    ],
    content: [
        { required: true, message: '请输入新闻内容', trigger: 'blur' },
    ],
    category: [
        { required: true, message: '请选择分类', trigger: 'blur' },
    ],
    cover: [
        { required: true, message: '请上传新闻封面图片', trigger: 'blur' },
    ],

})

// 新闻类别选择字段
const options = [
    {
        label: "最新动态",
        value: 1
    },
    {
        label: "典型案例",
        value: 2
    },
    {
        label: "通知公告",
        value: 3
    },
]
const handleChangeEditor = (data) => {
    // console.log(data);
    // 赋值给content
    newsForm.content = data
}

const handleChange = (file) => {
    newsForm.cover = URL.createObjectURL(file)
    newsForm.file = file
}
const submitForm = () => {
    newsFormRef.value.validate(async (valid) => {
        if (valid) {
            // console.log(newsForm);
            const result = await upload("/adminapi/news/update", newsForm)
            if (result.ActionType === 'OK') {
                ElMessage.success("新闻更新成功")
                router.push(`/news-manage/newslist`)
            } else {
                ElMessage.error(result.errorMsg)
            }

        } else {
            ElMessage.error("更新新闻失败")
        }
    })
}
const handleBack = () => {
    router.back()
}
onMounted(async () => {
    const res = await axios.get(`/adminapi/news/list/id/${route.params.id}`)
    // console.log(route.params.id);
    // 将 newsForm 重新指向 res.data.data[0] 的内存地址。这样做的话，newsForm 的引用会改变，但是Vue框架的响应式系统无法检测到这个变化，因此不会自动重新渲染页面。
    // newsForm = res.data.data[0]
    Object.assign(newsForm, res.data.data[0])
    showEditor.value = true
    // console.log(newsForm);
})
</script> 


<style lang="scss" scoped>
.demo-ruleForm {
    margin-top: 50px;
}
</style>